<template>
	<a-spin :spinning="loadSpinning">
		<a-form
			ref="formRef"
			:model="formData"
			:rules="formRules"
			layout="vertical"
			:label-col="{ ...layout.labelCol, offset: 0 }"
			:wrapper-col="{ ...layout.wrapperCol, offset: 0 }"
		>
			<a-row :gutter="16">
				<a-col :span="8">
					<a-form-item label="系统默认密码：" name="PWD_DEFAULT_PASSWORD">
						<a-input
							style="width: 200px"
							v-model:value="formData.PWD_DEFAULT_PASSWORD"
							placeholder="请输入系统默认密码"
						></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="密码定期提醒更新：" name="PWD_REMIND">
						<a-radio-group
							v-model:value="formData.PWD_REMIND"
							:options="yesNoOptions"
							placeholder="请选择密码定期提醒更新"
						></a-radio-group>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="密码定期提醒更新时间：" name="PWD_REMIND_DAY">
						<a-input-number
							style="width: 200px"
							v-model:value="formData.PWD_REMIND_DAY"
							:min="0"
							:max="999"
							addon-after="天"
							placeholder="请输入密码定期提醒更新时间"
						/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="16">
				<a-col :span="8">
					<a-form-item label="修改初始密码提醒：" name="PWD_UPDATE_DEFAULT">
						<a-radio-group
							v-model:value="formData.PWD_UPDATE_DEFAULT"
							:options="yesNoOptions"
							placeholder="请选择修改初始密码提醒"
						></a-radio-group>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="密码最小长度：" name="PWD_MIN_LENGTH">
						<a-input-number
							style="width: 200px"
							v-model:value="formData.PWD_MIN_LENGTH"
							:min="1"
							:max="20"
							addon-after="位"
							placeholder="请输入密码密码最小长度"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="是否含数字：" name="PWD_CONTAIN_NUM">
						<a-radio-group
							v-model:value="formData.PWD_CONTAIN_NUM"
							:options="yesNoOptions"
							placeholder="请选择包是否含数字"
						></a-radio-group>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="16">
				<a-col :span="8">
					<a-form-item label="是否包含小写字母：" name="PWD_CONTAIN_LOWER">
						<a-radio-group
							v-model:value="formData.PWD_CONTAIN_LOWER"
							:options="yesNoOptions"
							placeholder="请选择是否包含小写字母"
						></a-radio-group>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="是否包含大写字母：" name="PWD_CONTAIN_UPPER">
						<a-radio-group
							v-model:value="formData.PWD_CONTAIN_UPPER"
							:options="yesNoOptions"
							placeholder="请选择是否包含大写字母"
						></a-radio-group>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="是否包含特殊字符：" name="PWD_CONTAIN_CHARACTER">
						<a-radio-group
							v-model:value="formData.PWD_CONTAIN_CHARACTER"
							:options="yesNoOptions"
							placeholder="请选择是否包含特殊字符"
						></a-radio-group>
					</a-form-item>
				</a-col>
			</a-row>
			<a-form-item>
				<a-button type="primary" :loading="submitLoading" @click="onSubmit()">保存</a-button>
				<a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
			</a-form-item>
		</a-form>
	</a-spin>
</template>

<script setup name="pwdForm">
	import { required } from '@/utils/formRules'
	import { cloneDeep } from 'lodash-es'
	import { message } from 'ant-design-vue'
	import configApi from '@/api/dev/configApi'
	import tool from '@/utils/tool'

	const formRef = ref()
	const formData = ref({})
	const submitLoading = ref(false)
	const loadSpinning = ref(false)
	const layout = {
		labelCol: {
			span: 10
		},
		wrapperCol: {
			span: 12
		}
	}

	const category = 'PWD_POLICY'
	// 查询此界面的配置项,并转为表单
	const param = {
		category: category
	}
	configApi.configList(param).then((data) => {
		loadSpinning.value = false
		if (data) {
			data.forEach((item) => {
				formData.value[item.configKey] = item.configValue
			})
		} else {
			message.warning('表单项不存在，请初始化数据库')
		}
	})
	// 默认要校验的
	const formRules = {
		PWD_DEFAULT_PASSWORD: [required('请输入系统默认密码')],
		PWD_REMIND: [required('请选择密码定期提醒更新')],
		PWD_UPDATE_DEFAULT: [required('请选择修改初始密码提醒')],
		PWD_MIN_LENGTH: [required('请输入密码最小长度')],
		PWD_REMIND_DAY: [required('请输入密码定期提醒更新时间')],
		PWD_CONTAIN_NUM: [required('请选择是否包含数字')],
		PWD_CONTAIN_LOWER: [required('请选择是否包含小写字母')],
		PWD_CONTAIN_UPPER: [required('请选择是否包含大写字母')],
		PWD_CONTAIN_CHARACTER: [required('请选择是否包含特殊字符')]
	}

	// 开关
	const yesNoOptions = tool.dictList('YES_NO')

	// 验证并提交数据
	const onSubmit = () => {
		formRef.value.validate().then(() => {
			submitLoading.value = true
			let submitParam = cloneDeep(formData.value)
			const param = Object.entries(submitParam).map((item) => {
				return {
					category: category,
					configKey: item[0],
					configValue: item[1]
				}
			})
			configApi
				.configEditForm(param)
				.then(() => {})
				.finally(() => {
					submitLoading.value = false
				})
		})
	}
	// 重置表单，且设置默认值
	const resetForm = () => {
		formData.value = {
			PWD_DEFAULT_PASSWORD: '123456',
			PWD_REMIND: 'true',
			PWD_UPDATE_DEFAULT: 'true',
			PWD_MIN_LENGTH: '6',
			PWD_REMIND_DAY: '30',
			PWD_CONTAIN_NUM: 'true',
			PWD_CONTAIN_LOWER: 'true',
			PWD_CONTAIN_UPPER: 'true',
			PWD_CONTAIN_CHARACTER: 'true'
		}
	}
</script>

<style scoped></style>
